<!--
 * @Author: szm
 * @Date: 2023-11-07 11:35:23
 * @LastEditTime: 2023-11-07 11:35:30
-->
<template>
  <div>
    <div class="pad-25 bg-fff">
      <div class="handle-box flex align-center">
        <el-button type="primary" class="handle-del mar-r-10" @click="toFlow('add', '')" size="large">新建</el-button>
      </div>
      <div class="container">
        <el-table :data="tableData" style="width: 100%" header-cell-class-name="table-header" v-loading="loading"
          :header-cell-style="headerStyle" size="large">
          <el-table-column prop="flowName" label="流程名称" />
          <el-table-column prop="nodeNum" label="节点数量" />
          <el-table-column prop="gmtModify" label="最近更新时间" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="getInfo(scope.row.id)">查看</el-button>
              <el-button link type="primary" size="small" @click="toFlow('edit', scope.row)">编辑</el-button>
              <el-button link type="primary" size="small"
                @click="handelConfirmFun(scope.$index, scope.row, '确定删除流程？', deleteFlow)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="mar-t-20" layout="total, prev, pager, next"  :total="total" @current-change="handleCurrentChange" :hide-on-single-page="showPage"/>
       
      </div>
    </div>
    <el-drawer v-model="isShowDrawer" append-to-body>
      <template #header>
        <h4>流程详情</h4>
      </template>
      <template #default>
        <el-descriptions :column="1">
          <el-descriptions-item label="流程名称">{{ flowForm.flowName }}</el-descriptions-item>
          <el-descriptions-item label="关联患者">{{ flowForm.linkPatient == 0 ? '关闭' : '开启' }}</el-descriptions-item>
          <el-descriptions-item label="流程节点">
            <el-timeline class="flow-time">
              <el-timeline-item v-for="(activity, index) in flowForm.nodes" :key="index" color="#409eff">
                <slot>
                  <p>{{ activity.nodeName }}</p>
                  <div class="flow-time-div">
                    <div>
                      <span>使用时间下限 <span class="flow-time-m">{{ activity.lowerLimit }}分钟</span></span>
                      <span class="flow-time-span">使用时间上限 <span class="flow-time-m">{{ activity.upperLimit
                      }}分钟</span></span>
                    </div>
                  </div>
                </slot>
              </el-timeline-item>
            </el-timeline>
          </el-descriptions-item>

        </el-descriptions>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button plain type="primary" @click="isShowDrawer = false">返回</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
​
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getFlowPage, delFlow, getFlowInfo } from "@/api/flowConfig"
import { ElMessage } from 'element-plus'
import tablePageSetting from "@/hooks/index.js"
const { headerStyle, tableData, total, loading, handleCurrentChange, getList, handelConfirmFun } = tablePageSetting(getFlowPage, {});
const router = useRouter();
// const tableData = ref([]);
// const loading = ref(false);
// const headerStyle = reactive({
//   background: "rgb(230, 243, 255)",
//   color: "rgb(55, 59, 131)",
//   fontWeight: 500,
// });
const pageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 1
})
const showPage = ref(false) //分页只有一页时是否显示
const flowForm = reactive({
  flowName: '',
  linkPatient: 0,
  nodes: []
})
const isShowDrawer = ref(false)
//获取列表
// const getList = async () => {
//   let obj = {
//     limit: pageObj.pageSize,
//     page: pageObj.currentPage,
//   }
//   await getFlowPage(obj).then((res) => {
//     tableData.value = res.data.records
//   })
// }
// 跳转flow详情
const toFlow = (type, row) => {
  router.push({ path: 'updateFlow', query: { type: type, id: type == 'edit' ? row.id : '' } })
}
//详情
const getInfo = async (id) => {
  await getFlowInfo(id).then((res) => {
    let data = res.data;
    flowForm.flowName = data.flowName;
    flowForm.linkPatient = data.linkPatient;
    flowForm.nodes = data.nodes;
    isShowDrawer.value = true;
  })
}
//删除
const deleteFlow = (e) => {
  let { index, row } = e;
  if (!row.id) return;
  delFlow(row.id)
    .then(res => {
      if (res.code == 0) {
        ElMessage.success(`操作成功`);
        getList();
      } else {
        ElMessage.error(res.message);
      }
    })
    .finally(() => {
    });
}

// 初始化
onMounted(() => {
  getList()
})

</script>
<style lang="scss" scoped>
@import "@/assets/mixin/css/tablePublic";

.flow-time {
  margin-top: 7px;

  .flow-time-div {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    span {
      font-size: 12px;
      color: #999;
    }

    .flow-time-span {
      margin-left: 30px;
    }

    .flow-time-m {
      margin-left: 5px;
      color: #333;

    }

  }
}

::v-deep .el-descriptions__cell {
  display: flex;
}
</style>